<template>
<div class="zui">


  <div class="zuida">
    <div class="title">登录
    </div>
    <!-- <div class="id" >
      ID号
      <input type="text" v-model="id">
    </div> -->
    <div class="name" >姓名
      <input type="text" v-model="name">
    </div>
    <!-- <div class="sex">性别
      <el-radio v-model="radio" label="nan">男</el-radio>
  <el-radio v-model="radio" label="nv">女</el-radio>
    </div> -->
    <div class="password">密码
      <input type="password" v-model="password">
    </div>
    <!-- <button @click="denglu">登录</button> -->
    <div class="xia">
      <el-button :plain="true" @click="denglu" class="dl">登录</el-button>
    <div class="zhuce">新用户?点击 <button @click="zhuce">注册</button> </div>
    </div>
    
  </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      name:'',
      // radio:'nan'
      password:'',
      id:''
    }
  },
  methods:{
    shibai(){
      this.$message({message:'抱歉,未查找到相关用户信息!',type:'warning'});
    },
    success(){
      this.$message({message:'恭喜你!登录成功!',type:'success'});
    },
    zhuce(){
      this.$router.push('/zhuce')
    },
    denglu(){
      this.axios.post('/denglutiao',{
        user:this.name,
        password:this.password,
        // id:this.id
      }).then((res)=>{
        if(res.data.length===0){
          // console.log("2");
          this.shibai()
          this.$router.go(0)
        }
        else{
          this.axios.post('/id',{
            name:this.name,
            password:this.password
          }).then((res)=>{
              this.success()
      this.id=res.data[0].id
          var acc={
      use:this.name,
      id:res.data[0].id
    }
    window.sessionStorage.setItem("user",JSON.stringify(acc))
    this.success()
    // this.hong()
    this.$router.push('/')
          })
    //   this.success()
    //   var acc={
    //   use:this.name,
    //   id:this.id
    // }
    // window.sessionStorage.setItem("user",JSON.stringify(acc))
    // this.$router.push('/')
        }
        
      })
    }
  },
  created(){
    this.$store.commit('bian')
    window.sessionStorage.clear()
  }
}
</script>
<style lang="less" scoped>
.zui{
  // z-index: 1;
  // margin-top: -100px;
  width: 100%;
  height: 100vh;
  // background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.b4eaf9808a80c7f4e6ab4f947a24a27d?rik=2RaQSZir8dgFEg&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f63%2f6163.jpg&ehk=84nsFWqrUl%2fUQ%2bFwKcy%2fdAJIX7iDIiYjIbmuUmwj0kI%3d&risl=&pid=ImgRaw&r=0');
  
}
.zui::before{
  content: '';
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  //background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.b4eaf9808a80c7f4e6ab4f947a24a27d?rik=2RaQSZir8dgFEg&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f63%2f6163.jpg&ehk=84nsFWqrUl%2fUQ%2bFwKcy%2fdAJIX7iDIiYjIbmuUmwj0kI%3d&risl=&pid=ImgRaw&r=0');
  background-image: url("../img/background.jpg");
  opacity: 0.7;
  z-index: -1;
}

// body{
  
// }
  .zuida{
    border-radius: 10px;
    box-shadow: 1px 1px 15px #151515;
    position: absolute;
    bottom: calc(46%);
    right: calc(40%);
    width: 336px;
    height: 220px;
    // background-color:#8ddc97b5;
    background: linear-gradient(to bottom right, #b0e70bb2, #0bf6bfe0);
    margin: 0 auto;
    // margin-top: 100px;
    // background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.e8d625ef8384473b2d6e439a7f0487a9?rik=IrwzcH0iWuN6TA&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f37%2f1837.jpg&ehk=6vDiUh4TZk%2fzTOUy3GkTl31O8NcrlJzEcL9MkUebAPw%3d&risl=&pid=ImgRaw&r=0');
  }
  .id{
    width: 240px;
    margin: 0 auto;
    
    margin-bottom: 5px;
  }
  .name{
    width: 240px;
    margin: 0 auto;
    margin-bottom: 5px;
  }
  .password{
    width: 240px;
    margin: 0 auto;
  }
  .title{
    text-align: center;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .xia{
    width: 240px;
    margin: 0 auto;
  }
  .dl{
    margin-left: 80px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 60px;
    height: 38px;
    
    
  }
  /deep/ .el-button{
      font-size: 16px;
    line-height: 38px;
    padding: 0;
    }
    .zhuce{
      width: 240px;
      margin: 0 auto;
    }
</style>